<template>
  <div class="table-list-wrapper">
    <el-table :data="tableList" style="width: 100%" border :height="height">
      <el-table-column prop="order_no" label="兑换码" width="">
        <template slot-scope="scope">
          <span>{{ scope.row.order_no }}</span>
        </template>
      </el-table-column>
      <el-table-column label="课程名称" width="300">
        <template slot-scope="scope">
          <div class="d-flex">
            <div style="width: 50px mr-15">
              <el-avatar :size="50" :src="scope.row.permit_img" shape="square" />
            </div>
            <p class="width: 150px">{{ scope.row.content }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" width="" />
      <el-table-column prop="order_time" label="添加时间" width="" />
      <el-table-column prop="order_time" label="使用时间" width="" />
      <el-table-column prop="order_time" label="用户" width="">
        <template slot-scope="scope">
          <div>
            <p>{{ scope.row.name }}</p>
            <p>{{ scope.row.phone }}</p>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  components: {
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      height: 0,
      dialogVisible: false,
      id: '',
      dialogImageUrl: '',
      imgDialogVisiable: false,
      tableList: [
        {
          order_no: '2342542534',
          name: '小敏',
          phone: '18888888888',
          permit_img: '',
          content: '数学',
          type: '单节',
          price: '124',
          status: '待支付',
          order_time: '2020-4-21'
        },
        {
          order_no: '2342542534',
          name: '小敏',
          phone: '18888888888',
          permit_img: '',
          content: '数学',
          type: '单节',
          price: '124',
          status: '待支付',
          order_time: '2020-4-21'
        },
        {
          order_no: '2342542534',
          name: '小敏',
          phone: '18888888888',
          permit_img: '',
          content: '数学',
          type: '单节',
          price: '124',
          status: '待支付',
          order_time: '2020-4-21'
        },
        {
          order_no: '2342542534',
          name: '小敏',
          phone: '18888888888',
          permit_img: '',
          content: '数学',
          type: '单节',
          price: '124',
          status: '待支付',
          order_time: '2020-4-21'
        },
        {
          order_no: '2342542534',
          name: '小敏',
          phone: '18888888888',
          permit_img: '',
          content: '数学',
          type: '单节',
          price: '124',
          status: '待支付',
          order_time: '2020-4-21'
        },
        {
          order_no: '2342542534',
          name: '小敏',
          phone: '18888888888',
          permit_img: '',
          content: '数学',
          type: '单节',
          price: '124',
          status: '待支付',
          order_time: '2020-4-21'
        },
        {
          order_no: '2342542534',
          name: '小敏',
          phone: '18888888888',
          permit_img: '',
          content: '数学',
          type: '单节',
          price: '124',
          status: '待支付',
          order_time: '2020-4-21'
        },
        {
          order_no: '2342542534',
          name: '小敏',
          phone: '18888888888',
          permit_img: '',
          content: '数学',
          type: '单节',
          price: '124',
          status: '待支付',
          order_time: '2020-4-21'
        }

      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.resitHeight()
    })
  },
  methods: {
    resitHeight() {
      this.height = document.body.clientHeight - 380
      window.onresize = () => {
        this.height = document.body.clientHeight - 380
      }
    },
    _success(res) {
      this.$message({
        message: res.message,
        type: 'success'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
.el-table /deep/ .cell {
  .agree {
    color: #409eff;
    margin-right: 24px;
    cursor: pointer;
    white-space: nowrap;
  }
  .refuse {
    color: #f56c6c;
    cursor: pointer;
    white-space: nowrap;
  }
}
.el-table /deep/ .cell{
  .el-avatar{
    margin-right: 15px;
  }
}
.table-list-wrapper{
  margin-top: 35px;
}
.d-flex{
  display: flex;
  align-items: center;
  justify-content: center;
}
.mr-15{
  margin-right: 15px;
}

</style>
